<div
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
  v-kb-modal="isShow"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" @click="onHide"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">{{title}}</h4>
      </div>
      <div class="modal-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label for="" class="control-label col-md-3"
              >{{Kooboo.text.common.Types}}</label
            >
            <div class="col-md-9">
              <p class="form-control-static">
                <a
                  v-for="($data,index) in variants"
                  :key="index"
                  @click="onSelectType($data)"
                  :class=" { green: $data.selected }"
                  class="label label-sm label-default"
                  href="javascript:;"
                  >{{$data.displayText}}</a
                >
              </p>
            </div>
          </div>
          <div class="form-group">
            <label for="" class="control-label col-md-3"
              >{{Kooboo.text.common.unitPrice}}</label
            >
            <div class="col-md-9">
              <p class="form-control-static"
                >{{currentVar ? symbol + '' + currentVar.price :
                Kooboo.text.component.hardwareModal.selectTypeFirst}}</p
              >
            </div>
          </div>
          <div class="form-group">
            <label for="" class="control-label col-md-3"
              >{{Kooboo.text.component.hardwareModal.quantity}}</label
            >
            <div class="col-md-9">
              <div class="input-group input-xsmall">
                <input
                  type="number"
                  class="form-control input-xsmall"
                  min="0"
                  v-kb-tooltip:right.manual.error="error"
                  v-model="quantity"
                  id="_quantity"
                />
                <span
                  class="input-group-addon"
                  style="text-transform: capitalize;"
                  >{{ currentVar && currentVar.period}}</span
                >
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="" class="control-label col-md-3"
              >{{Kooboo.text.component.hardwareModal.startMonth}}</label
            >
            <div class="col-md-9">
              <div class="input-group input-small">
                <select class="form-control input-small" v-model="startMonth">
                  <option
                    v-for="(item,index) in availableMonths"
                    :key="index"
                    :value="item.value"
                    >{{item.displayName}}</option
                  >
                </select>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="" class="control-label col-md-3"
              >{{Kooboo.text.common.totalPrice}}</label
            >
            <div class="col-md-9">
              <p class="form-control-static">{{symbol + totalPrice}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn green" @click="onBuy" :disabled="!isAbleToBuy"
          >{{Kooboo.text.common.buy}}</button
        >
        <button class="btn gray" @click="onHide"
          >{{Kooboo.text.common.cancel}}</button
        >
      </div>
    </div>
  </div>
</div>
